<template>
  <div class="search">
    <nav class="searchList-nav" ref="change">
      <span :class="{isActive: toggle == 'Songs' }" @click="handleChangeView('Songs')">歌曲</span>
      <span :class="{isActive: toggle == 'SongLists' }" @click="handleChangeView('SongLists')">歌单</span>
    </nav>
    <component :is="currentView">

    </component>
  </div>
</template>

<script>
  import SearchSongs from '../components/search/SearchSongs'
  import SearchSongLists from '../components/search/SearchSongLists'
  export default {
    name: 'Search',
    components:{
      SearchSongs,
      SearchSongLists
    },
    data(){
      return{
        toggle:'Songs',
        currentView:'SearchSongs'
      }
    },
    methods:{
      handleChangeView(component){
        this.currentView = 'Search' + component;
        this.toggle = component
      }
    }
  }
</script>

<style scoped lang="scss">
@import "../assets/css/search.scss";
</style>
